<template>
	<view>
		<view v-if="info.classify > 1" class="page-foot bgf">
			<view class="flex-box flex-between navbox">
				<view @tap="jumpToBack" class="navitem fwb">更多好文</view>
				<view @tap.stop.prevent="addAppointLog" data-type="5" data-subtype="0" class="navitem fwb">获取近期楼市解读</view>
			</view>
		</view>
		<view class="container">
			<view class="content">
				<view class="fs34 title fwb">{{ info.name }}</view>
				<view class="flex-box flex-between fs24 col89 author-time">
					<view>{{ info.author }}</view>
					<view>{{ info.createtime_text }}</view>
				</view>
				<view class="detail">
					<u-parse :content="info.content"></u-parse>
				</view>
			</view>
		</view>
		<view v-if="info.classify > 1" class="tools">
			<button class="btn1" hover-class="none" @tap="jumpToIndex">
				<image src="/static/icon/icon_tool2.png" class="tool2"></image>
				<view class="fs20">回首页</view>
			</button>
			<button @tap="share" class="btn1" hover-class="none">
				<image src="/static/icon/icon_tool3.png" class="tool3"></image>
				<view class="fs20">分享</view>
			</button>
		</view>
		<l-painter isCanvasToTempFilePath @success="path = $event" custom-style="position: fixed; left: 200%"  :pixel-ratio="2"
			@progress="progress()" css="width: 600rpx; padding: 40rpx 30rpx; background: #fff;border-radius:12rpx">
			<l-painter-view css="position:relative">
				<l-painter-view css="margin-bottom: 20rpx; color: #101010; font-weight: bold; font-size: 34rpx; ">
					<l-painter-text text="分享一篇楼市好文" />
				</l-painter-view>
				<l-painter-view css="padding-bottom:30rpx">
					<l-painter-image :src="info.image_text"
						css="object-fit: cover; object-position: 50% 50%; width: 100%; height: 250rpx; border-radius: 12rpx;" />
				</l-painter-view>
				<l-painter-view css="margin-bottom: 20rpx; color: #101010; font-size: 30rpx;">
					<l-painter-text :text="info.name"
						css="line-clamp: 1;line-height: 1.8em;" />
				</l-painter-view>
				<l-painter-view css="margin-bottom: 20rpx; color: #898989; font-size: 24rpx;">
					<l-painter-text :text="info.description"
						css="line-clamp: 1;line-height: 1.8em;" />
				</l-painter-view>
				<l-painter-view css="padding-bottom:30rpx;font-size:24rpx;color:#898989;position:relative;">
					<l-painter-image :src="info.author_avatar_text"
						css="object-fit: cover; object-position: 50% 50%; width: 55rpx; height: 55rpx; border-radius: 50%;margin-right:20rpx;display:inline-block;" />
					<l-painter-view css="display:inline-block;width:170rpx;line-height:55rpx;">
						<l-painter-text :text="info.author" />
					</l-painter-view>
					<l-painter-view
						css="display:inline-block;line-height:55rpx;text-align:right;position:absolute;right:0;">
						<l-painter-text :text="info.createtime_text" />
					</l-painter-view>
				</l-painter-view>
				<l-painter-view css="width:540rpx;position:relative;">
					<l-painter-view css="font-size:24rpx;">
						<l-painter-image :src="app_logo"
							css="object-fit: cover; object-position: 50% 50%; width: 85rpx; height: 85rpx; border-radius: 50%;margin-bottom:13rpx" />
						<l-painter-text text="佳和房产" css="display:block;" />
					</l-painter-view>
					<l-painter-view
						css="position:absolute;right:90rpx;text-align:right;top:30rpx;font-size:20rpx;color:#898989;">
						<l-painter-text text="长按识别二维码" css="display:block;" />
						<l-painter-text text="阅读全文" css="display:block;" />
					</l-painter-view>
					<l-painter-view css="display:inline-block;position:absolute;right:-60rpx">
						<l-painter-image :src="share_qrcode" css="width: 130rpx; height: 130rpx;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
		
		<u-popup :show="canvaspop" mode="center" closeable :safeAreaInsetBottom="false" @close="closemask"
			bgColor="transparent">
			<view class="canvaspop">
				<!-- #ifdef H5 -->
				<img :src="path" mode="widthFix" style="width: 100%;"></img>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image :src="path" mode="widthFix" style="width: 100%;"></image>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="flex-box flex-between btnbox">
					<!-- #ifdef MP -->
					<button open-type="share" class="btn">分享给好友</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button class="btn" @click="sharewx()">分享给好友</button>
					<!-- #endif -->
					<button class="btn" @click="saveImage()">保存分享海报</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="flex-box flex-center btnbox">
					<button class="btn">长按图片保存</button>
				</view>
				<!-- #endif -->
			</view>
		</u-popup>
		
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<view class="fs40 black tc mb20">我要咨询</view>
				<view class="fs30 col-darkGray tc mb40">
					<view>买房政策、房源信息、楼盘分析…</view>
					<view>有问题，他将在第一时间为您解答！</view>
				</view>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun" :value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码" placeholder-style="color:#ccc;" /></view>
				<view  @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>
</template>

<script>
	const app = getApp();
	
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				id: 0,
				info: {
					classify: 0,
					name: '',
					author: '',
					createtime_text: ''
				},
				canvaspop: false,
				app_logo: '',
				share_qrcode: '',
				path: '',
				
				popupStatus: false,//预约弹窗
				//订阅咨询预约弹窗
				reserveStatus: false,
				// 预约订阅类型，分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				appoint_type: 1,
				// 订阅分类，订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				appoint_subscribe_type: 0,
				// 预约手机号
				appoint_mobile: '',
				appoint_mobile_text: '',
				broker_user_id: 0,
			}
		},
		onLoad: function (options) {
			this.id=options.id || 0
			
			// 扫小程序码获得数据
			var that=this;
			functions.handlePid('article',options,function(id){
				if(id){
					that.id=id
				}
				that.initData();
			});
		},
		onShareAppMessage: function (res) {
			if (res.from == 'button') {
				return {
					title: this.info.name,
					imageUrl: this.path,
					path: '/pages/article/info_detail/info_detail?id=' +   this.info.id
				};
			}
		},
		methods: {
			jumpToBack() {
				uni.navigateBack();
			},
	
			jumpToIndex() {
				functions.jumpPages('/pages/home/index/index');
			},
			sharewx(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.path,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			saveImage() {
				functions.saveImages(this.path);
			},
			share(e) {
				if (!uni.getStorageSync('token')){
					functions.toast('请先登录')
					return;
				}
				let that = this;
				var info = this.info;
				var id = info.id;
				this.app_logo = app.globalData.config.app_logo;
				
				functions.getAjaxData(
					'/api/xiluhouse/article/share_qrcode',
					{
						id: id
					},
					function (res) {
						that.share_qrcode=res.data
					}
				);
				that.canvaspop = true;
			},
			progress(e) {
				if (e > 0) {
					uni.hideLoading();
				}
			},
			closemask() {
				this.canvaspop = false;
			},
			initData() {
				var that = this; // 获取---搜索数据
				functions.getAjaxData(
					'/api/xiluhouse/article/article_detail',
					{
						id: that.id
					},
					function (res) {
						that.info=res.data
					}
				);
			},
			
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				var that = this;
				functions.checkLogin(function (ret) {
					if (ret) {
						functions.jumpToChat(uid);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 添加预约记录
			addAppointLog(e) {
				this.appoint_type= e.currentTarget.dataset.type;
				this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
				this.broker_user_id= e.currentTarget.dataset.uid || 0; 
				// 处理手机号码
				this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus=true;
			},
			
			appoint_mobileFun(e) {
				this.appoint_mobile=e.detail.value
			},
			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
				  functions.toast('请输入正确的手机号');
				  return false;
				}
				functions.checkLogin(function (ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile=appoint_mobile;
			
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log',
							{
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								city: that.now_city,
								orther_areas: that.orther_areas,
								house_search_roomnum_ids: that.house_search_roomnum_ids,
								min_total_price: that.min_total_price,
								max_total_price: that.max_total_price
							},
							function (res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' + appoint_mobile.substr(7);
								that.reserveStatus=true;
								that.popupStatus=false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			closePopupStatus() {
				this.popupStatus=false;
			},
			closeReserveStatus() {
				this.reserveStatus=false;
			},
			
		}
	}
</script>

<style>
	.zixun-pop {
		position: relative;
		padding: 90rpx 40rpx 40rpx;
		width: 600rpx;
		max-height: 900rpx;
		background: #ffffff;
		overflow-y: scroll;
		border-radius: 8rpx;
	}
	.zixun-pop .input-box {
		width: 100%;
		height: 90rpx;
		background: #f6f7fa;
		border-radius: 10rpx;
	}
	.zixun-pop .input {
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
	}
	.zixun-pop .btn1 {
		width: 100%;
		height: 90rpx;
		background: #0091ff;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
	.zixun-pop .btn2 {
		width: 100%;
		height: 90rpx;
		background: #ff7b40;
		box-shadow: 0 4rpx 40rpx 0 rgba(248, 103, 56, 0.3);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
	.canvaspop {
		width: 600rpx;
	}
	
	.canvaspop .canvas {
		width: 600rpx;
		height: 863rpx;
		position: absolute;
		top: -9999px;
		right: -9999px;
	}
	
	.canvaspop .post {
		width: 600rpx;
		height: 863rpx;
		border-radius: 8rpx;
	}
	
	.canvaspop .btn {
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: var(--white);
		font-size: var(--fs30);
		text-align: center;
		font-weight: normal;
		border-radius: 8rpx;
		border: 1rpx solid var(--white);
		background: transparent;
		padding: 0;
		margin: 0;
	}
	
	.canvaspop .btnbox {
		padding: 40rpx 30rpx 0;
	}
.content{padding: 28rpx 40rpx 40rpx;}
.title{letter-spacing: -0.82rpx;padding-bottom: 33rpx;}
.author-time{padding-bottom: 40rpx;border-bottom: 1px solid #f4f3f3;}
.detail{padding-top: 24rpx;color: #333;}
.detail image{width: 100%;margin: 30rpx 0;}
.navbox{padding: 0 50rpx;height: 100rpx;background-color: #fff;}
.navbox .navitem{ border-radius: 10rpx;border: solid 1px #cccccc;text-align: center;line-height: 74rpx;height: 74rpx;width: 305rpx;font-size: 30rpx;color: #00a1ff;font-weight: 400;letter-spacing: 0.36rpx;}
.tools{  width: 100rpx;position: fixed;bottom: 130rpx;right: 40rpx;border-radius: 50rpx;background: #ffffff;box-shadow: 0px 4px 30px rgba(184,189,202,0.3);overflow:hidden;padding: 15rpx 20rpx;z-index: 1000;}
.tools .btn1{height: 120rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 0;margin: 0;width: 100%;font-size: 20rpx;font-weight: normal;border-bottom: 1px solid #f4f3f3;background-color: #fff;color: #333;box-shadow: none;border-radius: 0;}
.tools .tool1{width: 40rpx;height: 40rpx;margin-bottom: 20rpx;}
.tools .tool2{width: 37rpx;height: 36rpx;margin-bottom: 20rpx;}
.tools .tool3 {width: 32rpx;height: 32rpx;margin-bottom: 20rpx;}
.tools .icon_close{width: 34rpx;height: 34rpx;}
.tools .btn2{padding: 0;margin: 0;height: 60rpx;width: 100%;display: flex;justify-content: center;align-items: center;}
button::after{border: none;}
</style>
